<template>
    <div class="app-container">
      <el-table
        ref="dataList"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        row-key="id"
        style="margin-bottom: 20px"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="80" prop="number"></el-table-column>
        <el-table-column label="礼物ID" prop="gift.id"></el-table-column>
        <el-table-column label="礼物名称" prop="gift.name"></el-table-column>
        <el-table-column label="礼物数量" prop="num"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getList"
      /> -->
    </div>
</template>
  
<script>
  import { giftDetails } from '@/api/box'
  
  export default {
    name: 'welcome',
    data() {
      return {
        confirmBtn: false,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        tableData: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
        indexMethod(index) {
            // 倒序
            return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            // 正序
            // return (this.listQuery.page-1) * this.listQuery.perPage + index +1
        },
      getList() {
        this.listLoading = true
        // for (let key in this.listQuery) {
        //   this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        // }
        giftDetails(this.$route.query.id).then(({ data }) => {
          this.tableData = data
          this.listLoading = false
          this.confirmBtn = false
        })
      },
    }
  }
  </script>
  